<template>
	<view class="my_content">
		<view class="userifon">
			<view class="us_img" v-if="userInfo.phone">
  				<image :src="userInfo.avatar || '/static/my/mr.png'" mode="widthFix"></image>
                <!-- <image src="/static/my/mr.png" mode=""></image> -->
			</view>
			<view class="right" v-if="userInfo.phone">
				<view class="us_name">{{userInfo.nickname}}</view>
				<view class="dy" v-if="userInfo.type != 1">{{userInfo.shopName}}店员</view>
				<view class="id">{{userInfo.phone}}</view>
				<!-- <view class="id"  v-if="userInfo.type == 1">ID ： {{userInfo.userNo}}</view> -->
			</view>
			<view class="login" v-else>
				 <image src="/static/my/mr.png" mode="widthFix"></image>
				 <view class="login_btn" @click="()=> zheshow = !zheshow">登录</view>
			</view>
			<view class="tb" v-if="userInfo.phone">
				<image src="/static/my/tb.png" mode="widthFix" v-if="userInfo.type == 1"></image>
				<view style="position: relative;" v-else>
					<image src="https://img.shihhl.com/shequ/yg.png" mode="widthFix"></image>
					<image src="https://img.shihhl.com/shequ/mew.png" mode="widthFix" class="iocn" @click="()=> show = true"></image>
				</view>
			</view>
			<view class="pres" @click="Navigator()">
				<image src="/static/my/dei.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="content">
			<view class="my_jf">
				<view class="jf_lfet" @click="Qavigator('/pages/my/my_points')">
					<image src="https://img.shihhl.com/shequ/1_03%281%29.png" mode="widthFix"></image>
				    <view class="sum" style="padding-left: 40rpx;">{{userInfo.credit}}<text>分</text></view>
				</view>
				<view class="jf_right" @click="Qavigator('/pages/my/my_coupon')">
					<image src="https://img.shihhl.com/shequ/2_03%281%29.png" mode="widthFix"></image>
					<view class="sum">{{userInfo.couponCount}}<text>张</text></view>
				</view>
			</view>
			<!-- 我的服务 -->
			<view class="service">
				<view class="title">
					我的服务
				</view>
				<view class="selce">
					<view class="selce_itme" v-for="(item,index) in filteredSelceList" :key="index" @click="handleNavigate(item)">
						<image :src="'/static/my/t' + (index + 1) +'.png'" mode="widthFix"></image>
						<view class="name">{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<!-- 更多服务 -->
			<view class="service" style="margin: 10rpx 30rpx;">
				<view class="title">
					更多服务
				</view>
				<view class="selce_2">
					<view style="margin-bottom: 10rpx;" class="selce_itme" v-for="(item,index) in filteredMalist" :key="index" @click="handleNavigate(item)">
						<image :src="'/static/my/mag_' + (index + 1) + '.png'" mode="widthFix"></image>
						<view class="name">{{item.name}}</view>
						<button type="default" open-type="contact" v-if="index == 3">
						</button>
					</view>
				</view>
			</view>
		</view>
		<Butogin :zheshow='zheshow' @colse="(e)=> zheshow = false"/>
		<u-popup v-model="show" mode="center">
			<view class="u_img">
				<ikun-qrcode
				    width="260"
				    height="260"
				    unit="rpx"
				    color="#000000"
				    :data="userInfo.cardNo" 
				/>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default{
		data(){
			return{
				show:false,
				originalSelceList:[
					{
						name:'停车记录',
						url:"/pages/home/parkingrecord",
						needLogin: true  // 需要登录才能访问
					},
					{
						name:'我的优惠券',
						url:"/pages/my/my_coupon",
						needLogin: true
					},
					{
						name:'我的积分',
						url: "/pages/my/my_points",
						needLogin: true
					},
					{
						name:'积分订单',
						url:"/pages/my/exchange_order",
						needLogin: true
					},
					{
						name:'员工卡记录',
						url: "/pages/my/card_record",
						needLogin: true,
						permission: 'employee'  // 需要员工权限
					},
					{
						name:'我的报名',
						url:"/pages/my/my_registration",
						needLogin: true
					},
					{
						name:'我的小票',
						url: "/pages/my/my_receipt",
						needLogin: true
					},
					// {
					// 	name:'会员权益',
					// 	url: "/pages/my/vipcode"
					// },
				],
				originalMalist:[
					{
						name:'积分规则',
						url:"/pages/my/points_rule"
					},
					// {
					// 	name:'优惠券规则',
					// 	url:"/pages/my/Coupon_rules"
					// },
					{
						name:'商家管理',
						url: "/pages/merchantenter/index",
						permission: 'merchant'  // 需要商家权限
					},
					{
						name:'联系我们',
						url: "/pages/my/contacus",
					},
				],
				zheshow:false
			}
		},
		computed: {
		  ...mapState({
		    userInfo: state => state.user.userInfo
		  }),
		  // 计算属性：过滤后的我的服务列表
		  filteredSelceList() {
		    return this.originalSelceList.filter(item => {
		      // 当item有permission属性时，检查userInfo.type是否不等于1
		      if (item.permission) {
		        return this.userInfo.type !== 1;
		      }
		      return true;
		    });
		  },
		  // 计算属性：过滤后的更多服务列表
		  filteredMalist() {
		    return this.originalMalist.filter(item => {
		      // 当item有permission属性时，检查userInfo.type是否不等于1
		      if (item.permission) {
		        return this.userInfo.type == 3;
		      }
		      return true;
		    });
		  }
		},
		onShow() {
			this.$store.dispatch('user/getUserinfo')
		},
		methods:{
			Qavigator(url){
				uni.navigateTo({
					url
				})
			},
			Navigator(){
				uni.navigateTo({
					url:'/pages/my/personal'
				})
			},
			// 处理跳转判断
			handleNavigate(item) {
				// 1. 检查是否有URL
				if (!item.url) {
					// uni.showToast({
					// 	title: '功能开发中',
					// 	icon: 'none'
					// });
					return;
				}
				
				// 2. 检查是否需要登录
				if (item.needLogin && !this.userInfo.phone) {
					// 跳转到登录页
					this.zheshow = true
					return;
				}
				
				// 3. 检查权限（这里保留原有逻辑，但菜单项显示已通过计算属性控制）
				if (item.permission && this.userInfo.type !== 1) {
					// 权限已通过计算属性控制，这里可以移除原有检查或添加额外逻辑
				}
				
				// 4. 所有检查通过，执行跳转
				uni.navigateTo({
					url: item.url
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 样式部分保持不变 */
	button{
	 	border: none;
		background: none;
		width: 100%;
		text-align: right;
		justify-content: center;
		font-size: 28rpx;
		color: rgba(125, 125, 125, 1);
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 0;
		line-height: 0;
		height: 100%;
			position: absolute;
			top: 0%;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 0 !important;
		background-color: #fff0 !important;
		// z-index: -1;
		// padding-top: 10rpx;
		// padding-bottom: 26rpx;
		image{
			width: 100%;
		}
		// view{
		// 	margin-top: -4rpx !important;
		// }
	}
	button::after{
		border: none;
	}
	.my_content{
		display: flex;
		flex-direction: column;
		height: 100vh;
	}
	.login{
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 0 auto;
			image{
				width: 100rpx;
			}
			.login_btn{
				background: var(--Color, #fff);
				width: 173rpx;
				height: 60rpx;
				border-radius: 51rpx;
				color: #F26B2E;
				text-align: center;
				line-height: 59rpx;
				font-size: 30rpx;
				margin: 20rpx 0;
			}
		}
	.pres{
		width: 50rpx;
		position: absolute;
		    right: 12%;
		    top: 48%;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.userifon{
		height: 489rpx;
		background: url(https://img.shihhl.com/shequ/myb.png) no-repeat;
		background-size: 100% 100%;
		padding: 150rpx 30rpx;
		display: flex;
		align-items: center;
		position: relative;
		.us_img{
			width: 108rpx;
			height: 108rpx;
			image{
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.right{
			margin-left: 20rpx;
			color: #FFF;
			font-size: 26rpx;
            .us_name{
				font-size: 32rpx;
				margin-bottom: 10rpx;
			}
		}
		.id{
			margin-top:10rpx;
		}
		.tb{
			position: absolute;
			    width: 92%;
			    bottom: -3%;
			image{
				width: 100%;
				border-radius: 20rpx;
			}
			.iocn{
				position: absolute;
				width: 58rpx;
				right: 6%;
				bottom: 43%;
			}
		}
	}
	.my_jf{
		display: flex;
	    justify-content: space-between;
	    padding-top: 35rpx;
		margin: 0rpx 30rpx;
		.jf_lfet , .jf_right{
			width: 48%;
			position: relative;
			image{
				width: 100%;
				// position: absolute;
			}
		}
		.sum{
			top: 0%;
			color: #fff;
			position: absolute;
			font-size: 40rpx;
			font-weight: 700;
			// left: 5v;
			    top: 7%;
				    padding-left: 20rpx;
			text{
				font-weight: 400;
				font-size: 28rpx;
			}
		}
	}
	.content{
		flex: 1;
		background: url(https://img.shihhl.com/shequ/%E8%83%8C%E6%99%AF.png) no-repeat;
		background-size: 100%;
		    margin-top: -3%;
		    z-index: 1;
		.service{
			margin: 10rpx 30rpx 30rpx;
			padding: 32rpx 0rpx;
			border-radius: 20rpx;
			background-color: #fff;
			.title{
				position: relative;
				font-weight: 500;
				font-size: 32rpx;
				border-radius: 10rpx;
				background-color: #FFF;
				padding: 0 30rpx;
			}
			.title::after{
				content: " ";
				border-radius: 20px;
				background: var(--Color, #F26B2E);
				width: 68rpx;
				height: 8rpx;
				    bottom: -34%;
				    left: 5%;
				position: absolute;
			}
		}
		.selce{
			height: 350rpx;
			margin-top: 10rpx !important;
		}
		.selce , .selce_2{
			display: flex;
			margin-top: 50rpx;
			flex-wrap: wrap;
		}
		.selce_itme{
			width: 25%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-bottom: 0rpx;
			align-items: center;
			position: relative;
			image{
				width: 60rpx;
				margin-bottom: 10rpx;
			}
			font-size: 24rpx;
		}
		.selce_2 .selce_itme image{
			width: 50rpx;
		}
		.selce_2 .selce_itme image:nth-child(4){
			width: 60rpx !important;
		}
	}
</style>